<template>
  <!-- 频道页 -->
  <div class="channel-lists">
    <ul>
      <li v-for="(ele,index) in channel" :key="index"
        @click="ele.cate_type==0?toEvenMore(ele.cateid,ele.catename):toMore(ele.tab,ele.catename)">
        <div class="img-box"><img v-lazy="ele.icon" alt=""><span># {{ele.catename}} #</span></div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {
    getChannel
  } from "../../api/base"
  export default {
    name: 'channel',
    data() {
      return {
        channel: [],
        header_Animate: false
      }
    },
    methods: {
      toMore(tab, catename) {
        if (tab == "Series") {
          this.$router.push({
            name: 'Own'
          })
        } else if (tab == "Backstage") {
          this.$router.push({
            name: 'BehindTheScenes',
            params: {
              name: catename
            }
          })
        } else {
          this.$router.push({
            name: 'More',
            params: {
              tab: tab,
              name: catename
            }
          })
        }
      },
      toEvenMore(cateid, catename) {
        this.$router.push({
          name: 'evenMore',
          params: {
            cateid: cateid,
            name: catename
          }
        })
      }
    },
    created() {
      getChannel().then(data => {
        this.channel = data.data,
          console.log("频道", data.data);
      })
    }
  }
</script>

<style lang="less" scoped>
  .channel-lists {
    ul {
      display: flex;
      flex-wrap: wrap;

      li {
        width: 50%;
        overflow-y: scroll;

        .img-box {
          position: relative;
          width: 100%;
          height: 188px;

          img {
            width: 100%;
            height: 100%;
          }

          span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 14px;
            font-weight: 600;
          }
        }
      }
    }
  }
</style>